<template>
  <view class="mobile-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="header-title">UniApp 移动端测试</text>
    </view>

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 欢迎卡片 -->
      <view class="welcome-card">
        <view class="card-icon">📱</view>
        <text class="card-title">移动端开发</text>
        <text class="card-desc">使用 UniApp 开发跨平台移动应用</text>
      </view>

      <!-- 功能列表 -->
      <view class="feature-list">
        <view class="feature-item" v-for="(feature, index) in features" :key="index" @click="handleFeatureClick(feature)">
          <view class="feature-icon">{{ feature.icon }}</view>
          <view class="feature-content">
            <text class="feature-title">{{ feature.title }}</text>
            <text class="feature-desc">{{ feature.desc }}</text>
          </view>
          <view class="feature-arrow">></view>
        </view>
      </view>

      <!-- 状态信息 -->
      <view class="status-section">
        <text class="status-title">开发环境</text>
        <view class="status-list">
          <view class="status-item" v-for="(status, index) in statusList" :key="index">
            <view class="status-dot" :class="status.status"></view>
            <text class="status-text">{{ status.text }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="btn btn-primary" @click="handleRefresh">刷新页面</button>
        <button class="btn btn-secondary" @click="handleAbout">关于项目</button>
        <button class="btn btn-secondary" @click="handleTabTest">Tab栏测试</button>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">UniApp + Vue3 + TypeScript</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 功能列表数据
const features = ref([
  {
    icon: '🚀',
    title: '跨平台开发',
    desc: '一套代码，多端运行'
  },
  {
    icon: '⚡',
    title: 'Vue3 语法',
    desc: '使用最新的 Composition API'
  },
  {
    icon: '🔧',
    title: 'TypeScript',
    desc: '完整的类型支持'
  },
  {
    icon: '📱',
    title: '移动端优化',
    desc: '专为移动端设计'
  }
])

// 状态列表
const statusList = ref([
  { text: 'Vue 3.4.0', status: 'success' },
  { text: 'TypeScript 5.2.0', status: 'success' },
  { text: 'Vite 4.5.0', status: 'success' },
  { text: 'UniApp 3.0', status: 'success' }
])

// 点击功能项
const handleFeatureClick = (feature: { title: string }) => {
  uni.showToast({
    title: `点击了: ${feature.title}`,
    icon: 'none'
  })
}

// 刷新页面
const handleRefresh = () => {
  uni.showToast({
    title: '页面已刷新',
    icon: 'success'
  })
}

// 关于项目
const handleAbout = () => {
  uni.navigateTo({
    url: '/pages/about/about'
  })
}

// Tab栏测试
const handleTabTest = () => {
  uni.navigateTo({
    url: '/pages/tab-test/tab-test'
  })
}
</script>

<style>
/* 移动端容器 */
.mobile-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.header {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20rpx 40rpx;
  padding-top: 60rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

/* 主要内容区域 */
.content {
  flex: 1;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

/* 欢迎卡片 */
.welcome-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.card-desc {
  font-size: 28rpx;
  color: #666;
  display: block;
}

/* 功能列表 */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.feature-item {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.feature-item:active {
  transform: scale(0.98);
  background-color: rgba(255, 255, 255, 0.8);
}

.feature-icon {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.feature-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.feature-arrow {
  font-size: 32rpx;
  color: #999;
}

/* 状态信息 */
.status-section {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.status-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.status-item {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.status-dot.success {
  background-color: #52c41a;
}

.status-dot.warning {
  background-color: #faad14;
}

.status-dot.error {
  background-color: #ff4d4f;
}

.status-text {
  font-size: 28rpx;
  color: #333;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.btn {
  flex: 1;
  min-width: 200rpx;
  height: 80rpx;
  border-radius: 40rpx;
  border: none;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background-color: #667eea;
  color: white;
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
}

/* 底部信息 */
.footer {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 30rpx 40rpx;
  text-align: center;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}

.footer-text {
  font-size: 24rpx;
  color: #666;
}
</style> 